<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息表-列表页</title>
    <link rel="stylesheet" th:href="@{/resources/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/font-awesome.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/resources/awi/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/skins/all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/ztree/css/ztreeStyle/ztreeStyle.css}">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>主页
                    <small>用户信息表</small>
                </h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid box-info">
                <div class="box-header">查询参数</div>
                <div class="box-body">
                    <form id="search-form" class="form-inline">
                        <div class="col-md-3 form-group">
                            <label>参数</label>
                            <input type="text" class="form-control params" name="" id="">
                        </div>
                        <div class="col-md-3">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success" onclick="tableDataRefresh('#authUser-data-table')"><i class="fa fa-search"></i>查询</button>
                                <button type="reset" class="btn btn-warning"><i class="fa fa-refresh"></i> 重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="toolbar">
        <div class="col-md-12">
            <div class="btn-group">
                <button type="button" class="btn btn-info" onclick="createNew('authUser')"><i class="fa fa-plus"></i>新增</button>
                <button type="button" class="btn btn-danger" onclick="batchRemove()"><i class="fa fa-remove"></i>删除</button>
                <button type="button" class="btn btn-success" onclick="tableDataRefresh('#authUser-data-table')"><i class="fa fa-refresh"></i>刷新</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 table-responsive">
            <table id="authUser-data-table" data-url="/authUser/getPagingData" class="data-table"
                   data-locale="zh-CN" data-pagination="true" data-response-handler="dataTableResponseHandler"
                   data-unique-id="uid" data-id-field="id" data-side-pagination="server" data-classes="table table-hover table-no-bordered"
                   data-toolbar="toolbar"  	data-query-params-type="limit" data-height="730" data-striped="true" data-click-to-select="true"
                   data-query-params="dataTableQueryParams" data-method="post" data-content-type="application/x-www-form-urlencoded"
            >
                <thead>
                <tr>
                    <th data-title="多选" data-field="ck" data-align="center" data-valign="middle" data-checkbox=true></th>
                    <th data-title="登录名" data-field="loginName" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="真实姓名" data-field="realName" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="联系电话" data-field="phoneNo" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="邮箱" data-field="email" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="性别" data-field="sex" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="用户状态" data-field="status" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="序号" data-field="sortNo" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="创建时间" data-field="createTime" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="更新时间" data-field="updateTime" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="备注信息" data-field="remarks" data-align="center" data-valign="middle" data-width="150"></th>
                    <th data-title="操作" data-field="uid" data-align="center" data-valign="middle" data-width="200"
                        data-formatter="opFormatter"></th>
                </tr>
                </thead>

            </table>
        </div>
    </div>
</div>
</body>
<script th:src="@{/resources/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/bootstrap/js/bootstrap.min.js}"></script>

<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table-locale-all.min.js}"></script>
<script th:src="@{/resources/layer/layer.js}"></script>
<script th:src="@{/resources/plugins/plugins-init/plugins-init.js}"></script>
<script th:src="@{/resources/plugins/ztree/js/jquery.ztree.all.js}"></script>
<script th:src="@{/resources/commons/js/prototype.js}"></script>
<script type="text/javascript">
    //新增创建
    function createNew(){
        layer.open({
            title: '用户信息表新增',
            type: 2,
            content: '/authUser/toCreateView',
            area: ['800px', '600px'],
            maxmin: true,
            end:function () {
                tableDataRefresh('#authUser-data-table')
            }
        });
    }
    //信息编辑
    function edit(uid){
        layer.open({
            title: '用户信息表编辑',
            type: 2,
            content: '/authUser/toEditView?uid='+uid,
            area: ['800px', '600px'],
            maxmin: true
        });
    }
    //删除
    function remove(uid){
        $.get("/authUser/remove?uid="+uid,function(data){
            $("#authUser-data-table").bootstrapTable('refresh');
        })
    }
    //批量删除
    function batchRemove (){
        var selectedRows = $("#authUser-data-table").bootstrapTable('getAllSelections');
        var uids=[];
        $.each(selectedRows,function(index,value){
            uids.push(value.uid);
        })
        $.post("/authUser/batchRemove",{"uids":uids},function(data){
            $("#authUser-data-table").bootstrapTable('refresh');
        })
    }


    function opFormatter(value, row, index) {
        var removeItem = '<li><a href="javascript:remove(\''+row.uid+'\')"><i class="fa fa-remove"></i>删除</a></li>';
        var editItem = '<li><a href="javascript:edit(\''+row.uid+'\')" ><i class="fa fa-edit"></i>编辑</a></li>';
        var authorityItem = '<li><a href="javascript:authorize(\''+row.uid+'\')" ><i class="fa fa-users"></i>授权</a></li>';
        return '<div class="btn-group">' +
                '<button type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown"><i class="fa fa-hand-pointer-o"></i>&nbsp;点击按钮选择操作<span class="caret"></span></button>' +
                '<ul class="dropdown-menu" role="menu">'
                + removeItem + editItem +authorityItem+
                '</ul>' +
                '</div>';
    }
    function authorize(uid){
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var tree;
        var roleUids;
        $.get("/authRole/listBase",function(response){
            layer.open({
                title:'请选择人员角色（可多选）',
                content:'<ul class="ztree" id="role-tree"></ul>',
                area:['300px','400px'],
                yes:function(index){
                    var nodes = tree.getCheckedNodes();
                    roleUids=[];
                    $.each(nodes,function(index,item){
                        roleUids.push(item.id);
                    });
                    $.post("/authUser/authorize",{"roleUids":roleUids,"userUid":uid},function (response) {
                        layer.msg("授权成功");
                    });

                }
            });
            tree=$.fn.zTree.init($("#role-tree"), setting, response.data);
        })

    }
</script>
</html>